// 模拟数据 - 根据页面实际数据结构重新生成
export const mockData = {
  // 分类数据 - 与Home.vue和Category.vue中的数据结构一致
  categories: [
    { id: 1, name: '前端开发', count: 12 },
    { id: 2, name: 'UI框架', count: 8 },
    { id: 3, name: '性能优化', count: 5 },
    { id: 4, name: 'JavaScript', count: 15 },
    { id: 5, name: 'TypeScript', count: 3 },
    { id: 6, name: 'Vue3', count: 4 }
  ],
  
  // 标签数据 - 与Home.vue和Tag.vue中的数据结构一致
  tags: [
    { id: 1, name: 'Vue3', count: 15 },
    { id: 2, name: 'React', count: 10 },
    { id: 3, name: 'TypeScript', count: 8 },
    { id: 4, name: 'JavaScript', count: 12 },
    { id: 5, name: 'CSS3', count: 6 },
    { id: 6, name: '性能优化', count: 5 },
    { id: 7, name: '组合式API', count: 4 },
    { id: 8, name: '响应式系统', count: 3 },
    { id: 9, name: 'Ant Design', count: 2 }
  ],
  
  // 文章列表数据 - 与Home.vue、AllArticles.vue、Category.vue和Tag.vue中的数据结构一致
  articles: [
    {
      id: 1,
      title: 'Vue3组合式API深入解析',
      summary: '本文将深入探讨Vue3的组合式API，包括setup函数、ref、reactive等核心概念...',
      excerpt: '本文将深入探讨Vue3的组合式API，包括setup函数、ref、reactive等核心概念...',
      date: '2023-10-15',
      category: '前端开发',
      tags: ['Vue3', '组合式API']
    },
    {
      id: 2,
      title: 'Ant Design Vue使用技巧分享',
      summary: '分享一些在项目中使用Ant Design Vue的实用技巧和最佳实践...',
      excerpt: '分享一些在项目中使用Ant Design Vue的实用技巧和最佳实践...',
      date: '2023-09-28',
      category: 'UI框架',
      tags: ['Ant Design', 'Vue']
    },
    {
      id: 3,
      title: '前端性能优化实战',
      summary: '从网络请求、资源加载、渲染性能等多个角度讲解前端性能优化的方法...',
      excerpt: '从网络请求、资源加载、渲染性能等多个角度讲解前端性能优化的方法...',
      date: '2023-08-10',
      category: '性能优化',
      tags: ['性能优化', '前端']
    },
    {
      id: 4,
      title: 'Vue3响应式系统原理解析',
      summary: '深入分析Vue3的响应式系统实现原理，包括Proxy的应用和响应式追踪机制...',
      excerpt: '深入分析Vue3的响应式系统实现原理，包括Proxy的应用和响应式追踪机制...',
      date: '2023-07-25',
      category: '前端开发',
      tags: ['Vue3', '响应式系统']
    },
    {
      id: 5,
      title: 'Vue3性能优化实践指南',
      summary: '分享Vue3项目中常见的性能优化技巧和实践经验，让你的应用更流畅...',
      excerpt: '分享Vue3项目中常见的性能优化技巧和实践经验，让你的应用更流畅...',
      date: '2023-07-10',
      category: '性能优化',
      tags: ['Vue3', '性能优化']
    },
    {
      id: 6,
      title: 'JavaScript异步编程详解',
      summary: '从回调函数到Promise，再到async/await，全面讲解JavaScript异步编程的演进...',
      excerpt: '从回调函数到Promise，再到async/await，全面讲解JavaScript异步编程的演进...',
      date: '2023-06-20',
      category: 'JavaScript',
      tags: ['JavaScript', '异步编程']
    },
    {
      id: 7,
      title: 'Vue3 Composition API 入门指南',
      summary: '本文介绍Vue3 Composition API的基本概念和使用方法，帮助开发者快速上手...',
      excerpt: '本文介绍Vue3 Composition API的基本概念和使用方法，帮助开发者快速上手...',
      date: '2023-06-15',
      category: 'Vue3',
      tags: ['Vue3', '组合式API']
    },
    {
      id: 8,
      title: 'Ant Design Vue组件库最佳实践',
      summary: '探索Ant Design Vue组件库的使用技巧和最佳实践，提升前端开发效率...',
      excerpt: '探索Ant Design Vue组件库的使用技巧和最佳实践，提升前端开发效率...',
      date: '2023-05-20',
      category: 'UI框架',
      tags: ['Ant Design', 'Vue']
    },
    {
      id: 9,
      title: 'TypeScript高级类型详解',
      summary: '深入了解TypeScript的高级类型特性，包括泛型、条件类型、映射类型等...',
      excerpt: '深入了解TypeScript的高级类型特性，包括泛型、条件类型、映射类型等...',
      date: '2023-04-10',
      category: 'TypeScript',
      tags: ['TypeScript', '高级类型']
    },
    {
      id: 10,
      title: '前端模块化发展历程',
      summary: '回顾前端模块化的发展历程，从CommonJS、AMD到ES6 Modules...',
      excerpt: '回顾前端模块化的发展历程，从CommonJS、AMD到ES6 Modules...',
      date: '2023-03-15',
      category: '前端开发',
      tags: ['JavaScript', '模块化']
    }
  ],
  
  // 文章详情数据（根据ID查询） - 与BlogDetail.vue中的数据结构一致
  getArticleDetail: (id) => {
    const article = mockData.articles.find(article => article.id === parseInt(id));
    if (!article) return null;
    
    // 根据不同文章ID返回不同的详细内容
    let content = '';
    if (article.id === 1) {
      content = `
        <h2>什么是组合式API？</h2>
        <p>组合式API (Composition API) 是Vue3中引入的一组新的API，它们允许我们以函数的方式组织和复用组件逻辑。</p>
        
        <h2>setup函数</h2>
        <p>setup函数是组合式API的入口点，它在组件实例创建之前执行。</p>
        
        <pre><code>export default {
          setup() {
            // 在这里使用组合式API
            return {}
          }
        }</code></pre>
        
        <h2>ref和reactive</h2>
        <p>ref用于创建响应式的基本类型值，reactive用于创建响应式的对象。</p>
        
        <pre><code>import { ref, reactive } from 'vue'

const count = ref(0) // 创建响应式的数字
const user = reactive({ name: '张三', age: 18 }) // 创建响应式的对象</code></pre>
        
        <h2>computed和watch</h2>
        <p>computed用于创建计算属性，watch用于监听响应式数据的变化。</p>
        
        <pre><code>import { ref, computed, watch } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

watch(count, (newValue, oldValue) => {
  console.log("count从" + oldValue + "变为" + newValue)
})</code></pre>
      `;
    } else {
      content = `
        <h2>简介</h2>
        <p>${article.summary}</p>
        
        <h2>主要内容</h2>
        <p>这是一篇关于${article.title}的详细文章。本文将深入探讨相关技术的原理和实践，帮助你更好地理解和应用这些知识。</p>
        
        <h2>核心概念</h2>
        <p>在本节中，我们将介绍${article.title}的核心概念和基本原理。这些概念是理解和应用相关技术的基础。</p>
        
        <h2>实践指南</h2>
        <p>在实际项目中，我们可以通过以下步骤来应用${article.title}相关的技术：</p>
        <ol>
          <li>了解基本概念和原理</li>
          <li>掌握基本使用方法</li>
          <li>在小型项目中实践</li>
          <li>逐步应用到大型项目</li>
        </ol>
        
        <h2>总结</h2>
        <p>通过本文的学习，相信你已经对${article.title}有了一定的了解。希望这些知识能够帮助你在实际项目中更好地应用相关技术，提升开发效率和代码质量。</p>
      `;
    }
    
    return {
      ...article,
      content: content
    };
  },
  
  // 个人信息介绍 - 与API文档中的数据结构保持一致
  personalInfo: {
    name: 'Gulu Blog',
    title: '前端开发工程师',
    description: '专注于Vue.js生态系统开发，热衷于分享前端技术和最佳实践。',
    initials: 'GB',
    about: [
      '你好！我是一名充满热情的前端开发工程师，拥有多年的Web开发经验。我专注于使用现代前端技术构建高质量、高性能的Web应用。',
      '我热衷于学习新技术，并将其应用到实际项目中。同时，我也喜欢通过写作分享我的知识和经验，希望能够帮助到更多的开发者。',
      '在这个博客中，我会分享关于前端开发的各种知识，包括Vue.js、React、TypeScript、性能优化等方面的内容。'
    ],
    skills: [
      {
        name: 'Vue.js',
        progress: 95,
        description: '精通Vue.js框架，包括组合式API、响应式系统等。'
      },
      {
        name: 'React',
        progress: 85,
        description: '熟练使用React框架及其生态系统。'
      },
      {
        name: 'JavaScript/TypeScript',
        progress: 90,
        description: '精通JavaScript和TypeScript，掌握高级特性。'
      },
      {
        name: 'CSS3/SCSS',
        progress: 88,
        description: '熟练掌握CSS3和SCSS，能创建精美的界面。'
      },
      {
        name: 'Webpack/Vite',
        progress: 82,
        description: '熟悉前端构建工具，能优化项目构建流程。'
      }
    ],
    contact: [
      {
        type: 'email',
        label: '邮箱',
        value: 'contact@gulublog.com',
        href: 'mailto:contact@gulublog.com'
      },
      {
        type: 'github',
        label: 'GitHub',
        value: 'github.com/gulublog',
        href: 'https://github.com/gulublog'
      },
      {
        type: 'zhihu',
        label: '知乎',
        value: 'zhihu.com/people/gulublog',
        href: 'https://www.zhihu.com/people/gulublog'
      }
    ]
  },
  
  // 网站备案信息
  recordInfo: {
    icp: '京ICP备xxxxxxxx号-1',
    beian: '京公网安备xxxxxxxxxxxx号',
    company: 'Gulu科技有限公司',
    copyright: '© 2023 Gulu Blog. All rights reserved.',
    // 显示控制字段 - 测试部分显示
    showIcp: true,
    showBeian: true,
    showCompany: true,
    showCopyright: true
  }
};